<template>
  <div class="home">
    <div class="title">产业数据分析平台</div>
    <div style="display: flex">
      <div class="menu">
        <el-menu
          :default-active="activeTabName"
          class="el-menu-vertical-demo"
          :router="true"
          @select="handleOpen"
        >
          <el-menu-item
            v-for="(item, index) in menusList"
            :key="index"
            :index="item.name"
          >
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.label }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <el-main>
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup name="Home">
import { CreditCard, Histogram } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const activeTabName = ref(""); // 当前显示的选项卡 激活的 name
const components = ref({
  CreditCard,
  Histogram,
});
const menusList = ref([
  {
    name: "message",
    label: "岗位信息",
    icon: "CreditCard",
  },
  {
    name: "demand",
    label: "岗位要求",
    icon: "Histogram",
  },
  {
    name: "major",
    label: "岗位专业",
    icon: "CreditCard",
  },
  {
    name: "user",
    label: "用户信息",
    icon: "CreditCard",
  },
  {
    name: "dataView",
    label: "数据大屏",
    icon: "CreditCard",
  },
]);

onMounted(() => {
  activeTabName.value = useRouter().name;
  // router.push({
  //   name: 'message'
  // })
});

function handleOpen(name) {
  activeTabName.value = name;
  router.push({ name: name });
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 24px;
  padding: 20px 40px;
  background: #fff;
  margin-bottom: 10px;
  box-shadow: 0px 4px 5px -2px rgba(180, 180, 180, 0.6);
}

.menu {
  width: 250px;
  // height: calc(100vh - 90px);

  .el-menu-vertical-demo {
    height: calc(100vh - 98px);
  }
}
</style>
